<template>
    <div id="Statistical_Into">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>小说列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small" class="admin_from">
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="title" placeholder="请输入小说名称"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="author" placeholder="请输入作者名称"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.isrecommend" placeholder="是否推荐" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.ishow" placeholder="是否App展示" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.issex" placeholder="请选择男频/女频" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="男频" value="1"></el-option>
                        <el-option label="女频" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="下架" value="0"></el-option>
                        <el-option label="上架" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                    <el-button type="primary" size="small" @click="addRecharge">添加小说</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    size="small"
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="coverpic"
                        label="封面"
                        width="122">
                    <template slot-scope="scope">
                        <img :src="scope.row.coverpic" width="30" height="30" alt="">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="书名">
                </el-table-column>
                <el-table-column
                        prop="author"
                        label="作者">
                </el-table-column>
                <el-table-column
                        prop="allchapter"
                        label="总章节">
                </el-table-column>
                <el-table-column
                        prop="iswz"
                        label="进度">
                    <template slot-scope="scope">
                        <span v-if="scope.row.iswz==1">连载</span>
                        <span v-if="scope.row.iswz==2">完结</span>
                    </template>
                </el-table-column>
                <!--                <el-table-column-->
                <!--                        prop="address"-->
                <!--                        label="属性">-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <span v-if="scope.row.isbg==1">小图</span>-->
                <!--                        <span v-if="scope.row.isbg==2">大图</span>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="address"-->
                <!--                        label="长篇/短篇">-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <span v-if="scope.row.islong==1">长篇</span>-->
                <!--                        <span v-if="scope.row.islong==2">短篇</span>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <el-table-column
                        prop="address"
                        label="男频/女频">
                    <template slot-scope="scope">
                        <span v-if="scope.row.issex==1">男频</span>
                        <span v-if="scope.row.issex==2">女频</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="是否推荐">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.isrecommend" :active-value="1" :inactive-value="0"
                                   @change="chooseSwitch(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="上/下架">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                                   @change="chooseSwitch(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="操作"
                        width="250">
                    <template slot-scope="scope">
                        <p style="text-align: center">
                            <el-button type="success" plain size="small" @click="look(scope.row.id)">小说章节</el-button>
                            <!--                            <el-button type="danger" plain size="small" @click="up(scope.row.id)">上传续集</el-button>-->
                            <el-button type="primary" plain size="small" @click="edit(scope.row.id)">修改</el-button>
                            <el-button type="warning" plain size="small" @click="remove(scope.row.id)">删除</el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination
                        background
                        @size-change="changeSize"
                        @current-change="changeCurrent"
                        :current-page="params.pagenum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="params.pagesize"
                        :total="params.totals"
                        :layout="this.$store.state.paginationLayout">
                </el-pagination>
            </div>
        </el-card>
        <!--            新增或编辑-->
        <el-dialog :title="formTitle" :width="this.$store.state.dialogMaxWidth" :visible.sync="visible">
            <novelDetail v-if="visible" @closeDatails="closeDatails" :bookId="bookId"></novelDetail>
        </el-dialog>
        <!--            新增或编辑-->
        <!--        <el-dialog title="上传续集" width="50%" :visible.sync="visible">-->
        <!--            <el-row :gutter="20">-->
        <!--                <el-col :span="15">-->
        <!--                    <el-form ref="form" label-width="150px" size="small">-->

        <!--                    </el-form>-->
        <!--                </el-col>-->
        <!--            </el-row>-->
        <!--            <span slot="footer" class="dialog-footer">-->
        <!--                <el-button @click="visible = false" size="small">取 消</el-button>-->
        <!--                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>-->
        <!--        </el-dialog>-->
    </div>
</template>

<script>
    import novelDetail from '../../../components/novel_list/novel_list'

    export default {
        name: "Statistical_Into",
        components: {novelDetail},
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0,
                },
                tableData: [],
                fromTitle: '',
                visible: false,
                btype: 2,
                title: '',
                author: '',
                searchForm: {
                    isrecommend: '',
                    status: '',
                    ishow: '',
                    issex: '',
                },
                formTitle: '',
                bookId: '',
            }
        },
        created() {
            this.getList();
        },
        watch: {
            title(e) {
                this.getList()
            },
            author(e) {
                this.getList()
            },
        },
        methods: {
            chooseSwitch(row) {
                this.$axios.put('admin/novel/' + row.id, row).then((res) => {
                    this.$message.success('成功');
                    this.getList();
                    this.visible = false;
                });
            },
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                    title: this.title,
                    author: this.author,
                    isrecommend: this.searchForm.isrecommend,
                    status: this.searchForm.status,
                    ishow: this.searchForm.ishow,
                    issex: this.searchForm.issex
                };
                this.$axios.post("admin/novel/index", data).then((res) => {
                    console.log(res.data);
                    this.params.totals = res.data.count;
                    this.tableData = res.data.list;
                    // console.log(this.tableData);
                });
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList();
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList();
            },
            up(id) {
                this.anid = id;
                this.visible = true
            },
            addRecharge() {
                // this.$router.push({
                //     path: '/Novel_Details'
                // })

                this.formTitle = '新增';
                this.bookId = '';
                this.visible = true;
            },
            edit(id) {
                this.id = id;
                this.bookId = id;
                this.formTitle = '编辑';
                this.visible = true;
                // this.$router.push({
                //     path: '/novel_details',
                //     query: {
                //         id: id
                //     }
                // })
            },
            look(id) {
                this.$router.push({
                    path: '/novel_diversity',
                    query: {
                        id: id
                    }
                })
            },
            remove(id) {
                this.$confirm('确定要进行操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.del('admin/novel/' + id, '').then((res) => {
                        this.$message.success('删除成功!');
                        this.getList();
                    });
                }).catch(() => {

                });
            },
            search() {
                this.params.pagenum = 1;
                this.getList();
            },
            closeDatails(data) {
                this.visible = data;
                this.getList();
            }
        }
    }
</script>

<style scoped>

</style>